/*
 * @Author: your name
 * @Date: 2022-01-26 10:15:37
 * @LastEditTime: 2022-04-02 11:04:20
 * @LastEditors: your name
 * @Description: 管理员列表页面
 * @FilePath: \web\src\router\adminUserPage\adminChild\adminList.jsx
 */
import React, {useEffect, useState} from "react";
import { Space, Table } from "antd";
import request from "../../../network/index";
import AdminBox from "../../../components/adminBox";
import { useNavigate } from "react-router-dom";
const AdminList = () => {
  
  const navigate = useNavigate();
  const [list, setList] = useState([]);

  useEffect( () => {
    const getList = async() => {
      const {list} = await request.get('/admin?type=1');
      list && list.map(e => e.key = e._id);
      setList(list);
    }
    getList()
  },[])

  const columns = [
    {
      title: "ID",
      dataIndex: "_id",
      key: "_id",
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "操作",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <span onClick={() => onEdit(record)}>修改</span>
          <span onClick={() => onDelete(record._id)}>删除</span>
        </Space>
      ),
    },
  ];

  const onEdit = item => {
    navigate("/adminUserPage/adminEdit",{state : {id : item._id, username : item.username}});
  };
  const onDelete = async id => {
    await request.delete(`/admin/${id}`)
  };

  return (
    <div id="AdminList">
      <AdminBox title="管理员列表">
        <Table
          columns={columns}
          dataSource={list}
          position="bottomCenter"
          pagination={{ pageSize: 5 }}
        />
      </AdminBox>
    </div>
  );
};

export default AdminList;
